<!--分类-->
<template>
    <view class="classification">
        <view class="page_left">
            <i class="iconfont icon-jiantou-copy"></i>
        </view>
        <view class="page page_right">
            <view class="page__bd">
                <view class="weui-search-bar">
                    <view class="weui-search-bar__form">
                        <view class="weui-search-bar__box">
                            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                            <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
                            <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                                <icon type="clear" size="14"></icon>
                            </view>
                        </view>
                        <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                            <icon class="weui-icon-search" type="search" size="14"></icon>
                            <view class="weui-search-bar__text">搜索</view>
                        </label>
                    </view>
                    <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
                </view>
                <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
                    <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                        <view class="weui-cell__bd">
                            <view>实时搜索文本</view>
                        </view>
                    </navigator>
                    <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                        <view class="weui-cell__bd">
                            <view>实时搜索文本</view>
                        </view>
                    </navigator>
                    <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                        <view class="weui-cell__bd">
                            <view>实时搜索文本</view>
                        </view>
                    </navigator>
                    <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                        <view class="weui-cell__bd">
                            <view>实时搜索文本</view>
                        </view>
                    </navigator>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import {
        USER_INFO,USER_SPECICAL_INFO
    } from '@/utils/constant';

    export default class classification extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '分类',    // 头部标题
        }
        components = {

        }

        data = {
            avatarUrl: "",
            nickName: "",
            bShowBind:false,
            inputShowed: false,
            inputVal: ""
        }


        methods = {  // 方法
            showInput: function () {
                this.inputShowed = true;
                this.$apply();
            },
            hideInput: function () {
                this.inputVal ="",
                this.inputShowed=false
            },
            clearInput: function () {
                this.inputVal= ""
            },
            inputTyping: function (e) {
                this.inputVal=e.detail.value
            }
        }
        events = {

        }
    }
</script>
<style lang="less">
    .classification{

        .searchbar-result{
            margin-top: 0;
            font-size: 14px;
        }
        .searchbar-result:before{
            display: none;
        }
        .weui-cell{
            padding: 12px 15px 12px 35px;
        }
    }

</style>
